<template>
    <div v-if="detailStatus" class="m-detail-modal">
        <div class="header">
            查看详情
            <span @click="close"><Icon type="close-round"></Icon></span>
        </div>
        <div class="content">
            <Card>
                <p slot="title">竞拍信息</p>
                <Row>
                    <Col span="12">
                    竞拍进度：距竞拍开始还有 01:30:20</Col>
                    <Col span="12">
                    竞拍状态：正常</Col>
                </Row>
                <Row>
                    <Col span="12">
                    拍卖场次：西部汽车城一场</Col>
                    <Col span="12">
                    拍卖时间：2017-09-05 16:41:28</Col>
                </Row>
                <Row>
                    <Col span="12">
                    入金/人：1000</Col>
                    <Col span="12">
                    入金时间：2017-09-04 16:41:28</Col>
                </Row>
                <Row>
                    <Col span="12">
                    竞拍最高 (万)：</Col>
                    <Col span="12">
                    拍卖底价 (万)：28.80</Col>
                </Row>
                <Row>
                    <Col span="12">
                    参与人数：5 人</Col>
                </Row>
            </Card>

            <Card :padding="0">
                <p slot="title">平台收益明细</p>
                <div class="m-table-header">入金总计(万)：2.00</div>
                <Table :columns="columns1" :data="data"></Table>
                <div class="m-table-header">收取服务费总计：1500</div>
                <Table :columns="columns2" :data="data"></Table>
                <div class="m-table-header">收取违约金总计：100</div>
                <Table :columns="columns3" :data="data"></Table>
            </Card>

            <Card :padding="0">
                <p slot="title">竞拍明细</p>
                <Table :columns="columns4" :data="data"></Table>
            </Card>
        </div>
    </div>
</template>
<script>
    export default {
        props: ['detailStatus'],
        data() {
            return {
                columns1: [
                    {
                        title: '时间',
                        key: 'name'
                    },
                    {
                        title: '联系人',
                        key: 'age'
                    },
                    {
                        title: '联系方式',
                        key: 'address'
                    },
                    {
                        title: '入金金额',
                        key: 'age'
                    }
                ],
                columns2: [
                    {
                        title: '时间',
                        key: 'name'
                    },
                    {
                        title: '联系人',
                        key: 'age'
                    },
                    {
                        title: '联系方式',
                        key: 'address'
                    },
                    {
                        title: '成交金额 (万)',
                        key: 'age'
                    },
                    {
                        title: '服务费',
                        key: 'age'
                    }
                ],
                columns3: [
                    {
                        title: '时间',
                        key: 'name'
                    },
                    {
                        title: '违约方',
                        key: 'age'
                    },
                    {
                        title: '联系人',
                        key: 'address'
                    },
                    {
                        title: '联系方式',
                        key: 'age'
                    },
                    {
                        title: '入金金额',
                        key: 'age'
                    },
                    {
                        title: '违约金额 ',
                        key: 'age'
                    },
                    {
                        title: '备注',
                        key: 'age'
                    }
                ],
                columns4: [
                    {
                        title: '竞拍时间',
                        key: 'name'
                    },
                    {
                        title: '联系人',
                        key: 'age'
                    },
                    {
                        title: '联系方式',
                        key: 'address'
                    },
                    {
                        title: '竞拍价格 (万)',
                        key: 'age'
                    },
                    {
                        title: '状态',
                        key: 'age',
                        render:(h,params)=>{
                            const row = params.row;
                            const color = row.age ==18 ? '#ccc' : '#000';
                            const text = row.age ==18 ? '未中标' : '已中标';
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:color
                                    }
                                }, text)
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ]
            }
        },
        methods: {
            close() {
                this.$emit('closeModal')
            }
        }
    }
</script>
<style scoped lang="scss">
    .m-detail-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        z-index: 100;

    .header {
        background-color: #f8f8f9;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        padding-left: 25px;
        padding-right: 5px;
        color: #000;
        box-shadow: 1px 1px 1px rgba(220, 172, 172, .5);

    span {
        float: right;
        padding: 0 20px;
        cursor: pointer;
    }

    }
    .content {
        font-size: 14px;
        padding: 15px 50px 150px 25px;
        height: 100%;
        overflow-y: scroll;
    }

    .ivu-row {
        height: 30px;
    }

    .ivu-card {
        margin-top: 20px;
    }

    .m-table-header {
        height: 40px;
        line-height: 40px;
        padding-left: 16px;
        background-color: #f8f8f9;
    }

    }
</style>
